<script setup>
import {inject} from "vue"
import DesignerElementBox from "../Layout/DesignerElementBox.vue"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    },
})
const emits = defineEmits(["active", "remove"])
const activeElementId = inject("activeElementId")

</script>

<template>
    <div :style="elem.styleConfig" class="Text1" @click.stop="emits('active', elem)">
        <DesignerElementBox :is-active="activeElementId === elem.id" @remove="emits('remove', elem)" />
        <span v-if="elem.dataConfig.bindType === 'static'">{{ elem.dataConfig.value }}</span>
        <span v-if="elem.dataConfig.bindType === 'dynamic'" class="dynamic-value">{{ elem.dataConfig.value }}</span>
    </div>
</template>

<style lang="scss" scoped>
.Text1 {
    position: relative;
}
</style>